<template>
  <q-item v-if="canSee"
          clickable
          :to="props.link">
    <q-item-section v-if="props.icon"
                    avatar>
      <q-icon :name="props.icon" />
    </q-item-section>

    <q-item-section>
      <q-item-label>
        {{ props.title }}
      </q-item-label>
    </q-item-section>
  </q-item>
</template>

<script setup>
import { computed } from "vue";
import { authStore } from "stores/auth-store";

defineOptions({
  name: 'NavigationLink'
})

const auth = authStore()

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  caption: {
    type: String,
    default: ''
  },
  link: {
    type: String,
    default: '#'
  },
  icon: {
    type: String,
    default: ''
  },
  permission: {
    type: String,
    default: ''
  }
})

const canSee = computed(() => {
  if (!auth.user) {
    return false
  }
  return auth.user.can(props.permission)
})
</script>
